window.onload = () => {
    let username = document.getElementById("username")
    let password = document.getElementById("password")
    
    //js来发送请求，提交表单数据
    let btn = document.querySelectorAll("input")[2]

    btn.addEventListener("click", (e) => {
        e.preventDefault()
        let name = username.value
        let pasd = password.value

        //1.内置方式（自带方式）

        //(1)XMLHttpRequest 【基本上发送的请求都是异步请求】

        // 创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest

        //初始化 HTTP 请求 
        //关键词： open 参数：（"请求方式","请求地址","是否异步"）
        xhr.open("GET", "http://127.0.0.1:8080/login"+"?username="+name+"&password="+pasd, true)


        //监听请求状态变化
        //onreadystatechange ：用于指定状态改变时触发的事件处理器
        xhr.onreadystatechange = function () {
            //readyState : 请求状态判断
            // 0:请求未初始化（未调用 open()）  1:服务器连接已建立（已调用 open()）
            // 2:请求已接收（服务器收到请求头）  3:请求处理中（服务器正在返回部分数据）
            // 4:请求完成且响应就绪‌（服务器已返回完整响应，可读取数据）

            //status : HTTP响应状态判断
            // 200：服务器成功处理请求并返回数据 
            // 404: 资源不存在  500:（服务器内部错误）等均为失败状态
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log("表单提交成功")
                // 打印请求响应信息
                console.log(xhr.responseText)
                    
            }
        }

        //向服务器发送 HTTP 请求‌
        xhr.send()

    })
}